<template>
	<view class="content">
		<Header>
			使用说明
		</Header>
		<view class="list">
			<uni-list>
				<uni-list-item direction="row" v-for="item in data" :key="item.id" :to="`/pages/my/illustrateContent?id=${item.id}`">
					<template v-slot:header>
						<view class="uni-thumb">
							<image src="https://zhzx.on-line-demo.com/image/sm.png" mode="widthFix" style="width: 100%;height: 100%;"></image>
						</view>
					</template>
					<template v-slot:body>
						<view class="uni-list-box uni-content">
								{{item.title}}
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-load-more v-if="showLoad" :status="loadStatus" />
		</view>
	</view>
</template>

<script>
	import Header from '../../components/header.vue'
	import request from '../../common/request.js'
	export default {
		components: {
			Header,
		},
		data() {
			return {
				data:[],
				page: 1,
				loadStatus: 'loading',
				showLoad: false,
			}
		},
		mounted(){
			this.getListData()
		},
		onReachBottom(){
			if(this.loadStatus != 'loading'){
				this.loadStatus = 'loading'
				this.showLoad = true
				this.page++
				this.getListData()
			}
		},
		methods: {
			getListData(){
				request({
					url:'/manual/useManual',
					data:{
						page: this.page
					},
					method:'POST',
				}).then(res => {
						if(res.code == 1){
							this.data = this.data.concat(res.data)
							if(this.page == res.lastPage){
								this.loadStatus = 'no-more'
							}else{
								this.loadStatus = 'more'
								this.showLoad = false
							}
						}else{
							this.loadStatus = 'no-more'
							// uni.showToast({
							// 	title: res.msg,
							// 	icon: 'none',
							// 	duration: 2000
							// });
						}
					})
			},
		}
	}
</script>

<style scoped>
	.content{
		background-color: #f9f9f9;
		min-height: calc(100vh - 45px);
	}
	.list{
		background-color: #fff;
		margin: 15px;
		border-radius: 10px;
		overflow: hidden;
		padding: 15px;
		box-sizing: border-box;
	}
	::v-deep .uni-list-item__container{
		align-items: center;
		padding: 20px 15px !important;
	}
	::v-deep .uni-list--border-top,
	::v-deep .uni-list--border-bottom{
		display: none;
	}
	.uni-thumb{
		border: none;
		width: 20px;
		height: 20px;
	}

</style>